<!--
 * @Author: fengYM feng25321@163.com
 * @Date: 2023-09-25 11:01:57
 * @LastEditors: fengYM feng25321@163.com
 * @LastEditTime: 2023-10-13 15:09:27
 * @Description: 修改密码
-->
<template>
  <view class="edit_box">
    <up-input v-model="formData.cell" :disabled="formData.cell" placeholder="输入手机号" border="bottom" placeholder-style="color:#9694AE"> </up-input>
    <up-input v-model="formData.checkCode" placeholder="输入验证码" border="bottom" placeholder-style="color:#9694AE">
      <template #suffix>
        <up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
        <u-button @tap="getCode" :text="tips" color="#02409a" size="mini"></u-button>
      </template>
    </up-input>
    <u-input v-model="formData.passWord" placeholder="输入密码" border="bottom" :password="isPass" placeholder-style="color:#9694AE">
      <template #suffix>
        <u-icon name="eye-off" color="#bfbfbf" size="28" v-if="isPass" @click="isPass = false"></u-icon>
        <u-icon name="eye" color="#bfbfbf" size="28" v-else @click="isPass = true"></u-icon>
      </template>
    </u-input>
    <u-input v-model="formData.passWord1" placeholder="再次输入密码" border="bottom" :password="isPass" placeholder-style="color:#9694AE">
      <template #suffix>
        <u-icon name="eye-off" color="#bfbfbf" size="28" v-if="isPass" @click="isPass = false"></u-icon>
        <u-icon name="eye" color="#bfbfbf" size="28" v-else @click="isPass = true"></u-icon>
      </template>
    </u-input>
    <view class="bottomBox">
      <u-button type="primary" @click="submit" shape="circle" color="#71cec5">提交</u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { smsSend } from "@/api/login";

const formData = ref({
  cell: uni.getStorageSync("userInfo").cell,
  checkCode: "",
  passWord: "",
  passWord1: "",
});
console.log(uni.getStorageSync("userInfo").cell);

const isPass = ref(true);
const tips = ref("获取验证码");
const uCodeRef = ref<any>(null);
const codeChange = (text: string) => {
  tips.value = text;
};
const getCode = () => {
  console.log(uCodeRef.value.canGetCode);
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    smsSend({ cell: formData.value.cell }).then((res: any) => {
      uni.hideLoading();
      // 这里此提示会被this.start()方法中的提示覆盖
      uni.showToast({
        title: "验证码已发送",
        icon: "none",
      });
      // 通知验证码组件内部开始倒计时
      uCodeRef.value.start();
      console.log(res);
    });
  } else {
    uni.showToast({
      title: "倒计时结束后再发送",
      icon: "none",
    });
  }
};
const submit = async () => {
  uni.showToast({
    title: "修改成功",
    icon: "success",
    duration: 2000,
    complete() {
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    },
  });
};
</script>

<style lang="less" scoped>
@import "./edit.less";
/deep/.u-input {
  padding: 34rpx 0px !important;
  background: none !important;
}
:deep(.u-border-bottom) {
  border-color: #f3f4f6 !important;
}
</style>
